<template>
  <div class="address">
    <van-nav-bar
      title="新增地址"
      left-text="返回"
      right-text="我的地址"
      left-arrow
      @click-left="$router.go(-1)"
      @click-right="$router.push('/myaddress')"
    />
    <div class="info">
        <div class="name">
            <span>姓 名</span>
            <input type="text" placeholder="姓名" v-model="userName">
        </div>
        <div class="phone">
            <span>电 话</span>
            <input type="text" placeholder="手机号码" v-model="userPhone">
        </div>
        <div class="add">
            <span>地 址</span>
            <input type="text" placeholder="收货地址" v-model="userAddressText">
        </div>
        <div class="ping">
            <div class="preservation" @click="Add">保存</div>
            <div class="submit" >提交</div>
        </div>
    </div>
  </div>
</template>

<script>
// import eventBus from '../utils/tools'

export default {
    data(){
        return {
            userName:'',
            userPhone:'',
            userAddressText:'',
            userInfo:[]
    }
  },
    methods: {
        Add() {
            this.userInfo.push(this.userName);
            this.userInfo.push(this.userPhone);
            this.userInfo.push(this.userAddressText);
            console.log(this.userInfo);
        } 
    },
    // provide() {
    //     return {
    //         userInfo:[]
    //     }
        
    // }
    // handClick() {
    //     eventBus.$emit('share',this.userInfo)
    // }

}
</script>

<style>
.info .name {
    display: flex;
    justify-content: space-around;
    margin: 40px 10px;
}
.name span{
    width: 20%;
    font-size: 20px;
}
.name input {
    border: none;
    outline: none;
    flex: 1;
    background-color: aqua;
    border-radius: 20px;
    text-align: center;

}

.info .phone {
    display: flex;
    justify-content: space-around;
    margin: 20px 10px;
}
.phone span{
    width: 20%;
    font-size: 20px;
}
.phone input {
    border: none;
    outline: none;
    flex: 1;
    background-color: aqua;
    border-radius: 20px;
    text-align: center;

}
.info .add {
    display: flex;
    justify-content: space-around;
    margin: 40px 10px;
}
.add span{
    width: 20%;
    font-size: 20px;
}
.add input {
    border: none;
    outline: none;
    flex: 1;
    background-color: aqua;
    border-radius: 20px;
    text-align: center;

}

.ping {
    display: flex;
    justify-content: space-around;

}
 .preservation {
    width: 70%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    font-weight: bolder;
    border-radius: 20px;
    margin: 0px auto;
    background-color: lightseagreen;
}
.submit {
    width: 70%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    font-weight: bolder;
    border-radius: 20px;
    margin: 0px auto;
    background-color: lightseagreen;

}
</style>